<template>
  <div class="homeView">
    <dv-full-screen-container
        class="container"
        :style="{
          backgroundImage:`url(${skinMode.backgroundImage})`
        }"
    >
      <div class="header">
        <home-header/>
      </div>
      <div class="body">
        <component :is="skinMode.leftBorderName" class="body_left">
          <left-chart/>
        </component>
        <div class="body_main">
          <component :is="skinMode.leftBorderName" class="body_main_chart">
            <main-chart />
          </component>
          <component :is="skinMode.bottomBorderName" title="XXX数据流量状态" class="body_main_state">
            <main-state/>
          </component>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script lang="ts" setup>
import HomeHeader from './homeHeader/index.vue'
import LeftChart from './component/leftChart/index.vue'
import MainChart from './component/mainChart/index.vue'
import MainState from './component/mainState/index.vue'
import $bus from '@/utils/bus/index'
import { useStore } from "vuex";
import {computed, ComputedRef, onBeforeUnmount, onMounted, ref} from "vue";
import {skin} from "@/utils/interface";
import original from "@/views/homeView/skin/original";
import {changeColor} from "@/style/changeColor";

const store = useStore()
const homeTimer = ref<number>()

window.addEventListener('load',() => {
  $bus.homeBus.emit('updateHome')
})

const skinMode:ComputedRef<skin> = computed(() => {
  return store.state.home.skinMode?store.state.home.skinMode:original
})

onMounted(() => {
  changeColor(store.state.home.skinMode)
  homeTimer.value = setInterval(() => {
    $bus.homeBus.emit('updateHome')
  },10000)
  $bus.homeBus.on('clearInterval',() => {
    clearInterval(homeTimer.value)
  })
  $bus.homeBus.on('createInterval',() => {
    $bus.homeBus.emit('updateHome')
    homeTimer.value = setInterval(() => {
      $bus.homeBus.emit('updateHome')
    },10000)
  })
})

onBeforeUnmount(() => {
  clearInterval(homeTimer.value)
})

</script>
<style lang="scss" scoped >
 .homeView {
   color: #ffffff;
   #dv-full-screen-container {
     background-size: 100% 100%;
     display: flex;
     flex-direction: column;
   }
   .header{}
   .body {
     height: calc(100% - 100px);
     display: flex;
     .body_left{
       width: 20%;
       height: 100%;
       padding: 10px;
       box-sizing: border-box;
     }
     .body_main{
       width: 80%;
       height:calc(100%);
       margin-right: 10px;
       .body_main_chart{
         height:calc(100% - 350px);
         padding: 10px;
         box-sizing: border-box;
       }
       .body_main_state{
         height: 350px;
         padding: 10px;
         box-sizing: border-box;
       }
     }
   }
 }
</style>
